<template>
  <!-- 确认订单页面 -->
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      style="height: 65px"
      title="确认订单"
      left-arrow
      @click-left="goSingleCommodity" />
    <div class="second">
      <!-- 地址 -->
      <div style="height: 90px" class="addressValue">
        <van-cell is-link @click="goadress">
          <!-- 放置图标 -->
          <template #title>
            <div class="custom-title">
              <van-icon name="map-marked" class="icon" />
              <div class="custom-value">
                <van-row>
                  <van-col>
                    {{ address.addressName }}
                  </van-col>
                  <van-col> &nbsp; &nbsp;{{ address.phone }} </van-col>
                </van-row>
                <div class="gap"></div>
                <van-row>
                  <van-col>
                    {{ address.detail }}
                  </van-col>
                </van-row>
              </div>
            </div>
          </template>
          <template #value> </template>
        </van-cell>
      </div>
      <div style="background-color: #dadce0; height: 4px"></div>

      <!-- 分割线 -->
      <div style="background-color: #f1f3f4"></div>

      <!-- 店铺 -->
      <van-row style="margin-top: 20px">
        <van-col span="24">
          <van-image
            width="30"
            height="30"
            radius="5px"
            :src="product.storeimage"
            style="width: 40px; height: 40px; float: left; margin-left: 5%" />

          <div style="text-align: left; font-size: 18px; margin-left: 18%">
            {{ product.stName }} &nbsp;&nbsp;<van-icon name="arrow" />
          </div>
        </van-col>
      </van-row>
      <!-- 商品信息 -->
      <div style="margin-top: 25px">
        <van-row>
          <van-col span="2" style="margin-left: 6px">
            <!-- 图片 -->
            <van-image
              width="100"
              height="100"
              radius="5px"
              :src="product.imageurl"
          /></van-col>

          <van-col span="18" style="margin-left: 3px">
            <div style="margin-left: -18%">{{ product.commodityName }}</div>

            <div style="height: 57px"></div>
            <van-stepper v-model="number" min="1" max="10" />
            <span
              style="
                font-size: 22px;
                margin-left: 6%;
                margin-top: 12px;
                color: red;
                font-weight: bold;
              "
              v-if="integral != ''"
              >{{ integral }}</span
            >
            <span style="font-size: 16px; margin-left: 1%; color: red">{{
              priceValue
            }}</span>

            <span
              style="font-size: 22px; color: red; margin-left: -9px"
              v-if="price != ''">
              <!-- 金额赋值 -->
              {{ price }}
            </span>

            <span
              style="
                margin-left: 6%;
                color: gray;
                text-decoration: line-through;
              "
              >￥{{ product.price }}</span
            >
          </van-col>

          <van-col span="2" style="margin-right: 1px">
            <div style="height: 80px"></div>
          </van-col>
        </van-row>
      </div>

      <!-- 分割线 -->
      <div
        style="
          background-color: #dadce0;
          height: 8px;
          margin-top: 20px;
        "></div>

      <!-- 运费 -->
      <van-row>
        <van-col
          style="
            text-align: left;
            font-size: 20px;
            padding: 10px 16px;
            width: 30%;
            font-weight: bold;
          "
          >运费</van-col
        >
        <van-col
          class="yunfei"
          @click="show = true"
          style="
            text-align: right;
            padding: 10px 16px;
            width: 70%;
            font-weight: bold;
          "
          >{{ freight }}<van-icon name="arrow"
        /></van-col>
      </van-row>

      <!-- 运费弹框 -->
      <van-action-sheet v-model="show" title="运费说明">
        <div class="content">{{ freight }}</div>
      </van-action-sheet>

      <!-- 留言 -->
      <van-cell-group>
        <van-field
          v-model="value"
          label="留言"
          placeholder="建议留言前先与商家沟通确认"
          class="liuyan" />
      </van-cell-group>

      <!-- 底部 -->
      <!-- 底部标签 -->
      <!-- 门店和立即兑换 -->
      <van-tabbar style="height: 50px">
        <van-tabbar-item style="color: black">
          <span style="font-size: 20px"
            >总计：<span
              style="color: red; font-weight: bold; font-size: 22px"
              v-if="integral != ''"
              >{{ integral * number }}</span
            >
            <span style="color: red; font-weight: bold; font-size: 16px">{{
              priceValue
            }}</span>
            <span
              style="color: red; font-weight: bold; font-size: 22px"
              v-if="price != ''"
              >{{ price * number }}</span
            >
          </span>
        </van-tabbar-item>

        <van-tabbar-item style="background-color: #fc5531; color: white"
          ><span style="font-size: 20px" @click="addOrder"
            >提交订单</span
          ></van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  //export default 相当于过去的new vue ({el:"#div"})
  //全部都是json格式

  props: {
    //注册属性，用来父子组件传递参数使用
  },
  data() {
    //定义数据的地方
    return {
      number: 0,
      show: false, //运费弹框是否显示
      value: "", //用于存储留言信息
      product: {},
      address: {},
      freight: "", //给运费信息赋值
      price: 0, //商品价格
      priceValue: "", //商品积分和商品价格中间的字
      integral: "", //商品积分
      user: "",
    };
  },
  created() {
    const dataParam = this.$route.query.data;
    const addressParam = this.$route.query.address;
    if (dataParam) {
      const product = JSON.parse(dataParam);
      this.product = product;
    }
    if (addressParam) {
      const address = JSON.parse(addressParam);
      this.address = address;
    } else {
      this.address = "null";
    }
    this.selectByToken();
    this.selectBy();
  },
  mounted() {},
  methods: {
    //根据token查询当前登录用户信息
    selectBy() {
      var _this = this;
      console.log("根据token查询当前登录用户信息。。。。。");
      this.$http
        .get("/tuser/queryBy")
        .then(function (response) {
          console.log(JSON.stringify(response));
          if (response.data.code == 200) {
            _this.user = response.data.data; //获取用户id
          }
        })
        .catch(function (error) {
          _this.$toast("获取用户id出错。。。");
        });
    },
    //返回上一级
    goSingleCommodity() {
      this.$router.push({
        path: "/SingleCommodity",
        query: {
          data: JSON.stringify(this.product),
        },
      }); //使用该方法会导致商品从上个页面的参数没有，整个页面不显示
    },
    //根据token查询当前登录用户的收获地址
    selectByToken() {
      var _this = this;
      console.log("根据token查询当前登录用户的收获地址。。。。。");
      this.$http
        .get("/address/queryDefaultAddress")
        .then(function (response) {
          console.log(JSON.stringify(response));
          if (response.data.code == 200) {
            if (_this.address == "null") {
              _this.address = response.data.data[0];
            } else {
              _this.address.phone = _this.address.tel;
              _this.address.addressName = _this.address.name;
              _this.address.detail = _this.address.address;
              _this.address.userId = _this.$route.query.UserId;
            }
            // }
            //判断是否有运费这个字段
            _this.freight = "免运费,部分地区不包邮";
            // //判断积分是否启用
            if (_this.product.integral != "") {
              // alert("执行了么" + product.newPrice);
              //积分启用 如果设置现价，就显示积分加现价
              if (_this.product.coupon != "") {
                // alert("执行了么");
                _this.integral = _this.product.integral;
                _this.priceValue = "积分+￥";
                _this.price = _this.product.coupon;
              } else {
                _this.integral = _this.product.integral;
                _this.priceValue = "积分 ";
              }
            } else {
              _this.price = _this.product.coupon;
              _this.priceValue = "￥";
            }
          }
        })
        .catch(function (error) {
          //alert(JSON.stringify(error));
          console(error);
          _this.$toast("你错了。。。");
        });
    },
    goadress() {
      this.$router.push({
        path: "/AddressOrder",
        query: {
          data: JSON.stringify(this.product),
        },
      });
    },
    //提交订单时，没有写收货地址，执行该方法 给出提示
    hint() {
      Toast("请先添加收获地址");
    },
    addOrder() {
      if (this.address != null && this.address != "") {
        let ffa = {};
        if (this.price != "" && this.integral == "") {
          ffa = {
            storeId: this.product.storeIdA,
            productId: this.product.commodityId,
            addressId: this.address.addressId,
            tcount: "order" + new Date().getTime(),
            userId: this.user.id,
            userName: this.user.smallname,
            productCount: this.number,
            productPrice: this.number * this.price,
            payStatusCode: 0,
          };
        } else if (this.price == "" && this.integral != "") {
          ffa = {
            storeId: this.product.storeIdA,
            productId: this.product.commodityId,
            addressId: this.address.addressId,
            tcount: "order" + new Date().getTime(),
            userId: this.user.id,
            userName: this.user.smallname,
            productCount: this.number,
            productPrice: 0,
            payStatusCode: this.number * this.integral,
          };
        } else if (this.price != "" && this.integral != "") {
          ffa = {
            storeId: this.product.storeIdA,
            productId: this.product.commodityId,
            addressId: this.address.addressId,
            tcount: "order" + new Date().getTime(),
            userId: this.user.id,
            userName: this.user.smallname,
            productCount: this.number,
            payStatusCode: this.number * this.integral,
            productPrice: this.number * this.price,
          };
        }


        var _this = this;
        this.$http
          .post("/tbOrder/add", ffa)
          .then(function (response) {
            console.log(response);
            if (response.data.data == 301) {
              Toast("您未在该店消费，暂无积分");
            } else if (response.data.data == 302) {
              Toast("积分不足");
            } else {
              if (response.data.code == 200) {
                _this.goPay(ffa.tcount);
                //原始js重新请求
              } else {
                _this.$message("操作失败");
              }
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      } else {
        this.hint();
      }
    },
    //提交订单时，有收货地址，跳转支付页面
    goPay(ffa) {
      this.$router.push({
        path: "/pay",
        query: {
          data: ffa,
        },
      });
    },
  },
  components: {},
};
</script>

<style scoped>
.col1 {
  margin-bottom: 35px;
}
.yunfei,
.liuyan {
  font-size: 20px;
}
.content {
  padding: 16px 16px 160px;
  text-align: left;
}

.second {
  background-color: #fafafa;
}

/* 导航栏css */
.van-nav-bar__title {
  font-size: 25px;
  font-weight: bold;
  margin-top: 20px;
}
/* 留言css */
.van-field__control {
  font-size: 16px;
}

/* 商品卡片css */
.van-card__price-integer {
  color: red;
  font-weight: bold;
  font-size: 22px;
}
.van-card__price-currency {
  content: null;
}
.van-card__origin-price {
  font-size: 18px;
  margin-left: 5%;
}
.custom-title {
  display: flex;
  align-items: center;
}

.icon {
  margin-right: 8px;
}
.van-cell__left-icon,
.van-cell__right-icon {
  height: 19px;
  font-size: 25px;
  line-height: 62px;
}
.van-cell--clickable {
  height: 90px;
  cursor: pointer;
}
.icon[data-v-3f8ea0ee] {
  margin-right: 8px;
  font-size: 36px;
  line-height: 54px;
}
.custom-value {
  width: 280px;
  margin-left: 11px;
}
.gap {
  height: 7px;
}
</style>
